import React from 'react';
import './orderdetails.css';
import '../../../index.css';
import { useLocation, useNavigate } from 'react-router';

export default function Orderdetails() {

   const data = useLocation();
   const dataArr = data.state.data;
   const navigate = useNavigate();
   console.log(dataArr);


   function goPayment(data) {
      return () => {
         navigate("/home/submitsuccess/apay", {
            state: {
               sumMoneyAll: parseFloat(data.total_price),
               date: data.order_time,
               store: data.store_name,
               shops: 1,
               address_id: data.address_id,
            }
         })
      }
   }


   return (
      <div id="orderdetails">
         <div className="orderdetails_top">订单详情</div>
         <div className="orderdetails_main">
            <div className='orderdetails_head'>
               <div>订单编号:<span>{dataArr.order_id}</span></div>
               <div>订单状态:<span>{dataArr.order_status}</span></div>
               <div>
                  {
                     dataArr.order_status === '关闭' || dataArr.order_status === '退款成功' ? <button className='orderdetails_shanchu'>删除订单</button> : ''
                  }
                  {
                     dataArr.order_status === '待付款' ? <button className='orderdetails_zhifu' onClick={goPayment(dataArr)}>去支付</button> : ''
                  }
                  {
                     dataArr.order_status === '待付款' ? <button className='orderdetails_quxiao'>取消订单</button> : ''
                  }
                  {
                     dataArr.order_status === '已收货' ? <button className='orderdetails_shenqing'>申请退款</button> : ''
                  }
                  {
                     dataArr.order_status === '已收货' ? <button className='orderdetails_pingjia'>去评价</button> : ''
                  }
                  {
                     dataArr.order_status === '待收货' ? <button className='orderdetails_pingjia'>确认收货</button> : ''
                  }
                  {
                     dataArr.order_status === '待收货' ? <button className='orderdetails_pingjia'>查看物流</button> : ''
                  }
                  {
                     dataArr.order_status === '退款失败' ? <button className='orderdetails_jieru'>申请平台介入</button> : ''
                  }
               </div>
            </div>
            <div className='orderdetails_psy orderdetails_matter'>
               <div><span>支付方式</span><span>1111</span></div>
               <div><span>支付流水号</span><span>111111</span></div>
               <div><span>下单时间</span><span>{dataArr.order_time}</span></div>
               <div><span>支付时间</span><span>111111</span></div>
               <div><span>发货时间</span><span></span></div>
               <div><span>收货时间</span><span></span></div>
               <div><span>取消时间</span><span></span></div>
               <div><span>申请退款时间</span><span>1111</span></div>
               <div><span>退款原因</span><span></span></div>
               <div><span>退款时间</span><span></span></div>
               <div><span>订单备注</span><span></span></div>
            </div>
            <div className="orderdetails_title">收货人信息</div>
            <div className="orderdetails_matter">
               <div><span>收货人姓名</span><span>{dataArr.address_name}</span></div>
               <div><span>地址</span><span></span>{dataArr.address}</div>
               <div><span>联系方式</span><span>{dataArr.address_phone}</span></div>
            </div>
            <div className="orderdetails_title">发票信息</div>
            <div className="orderdetails_matter">
               <div><span>发票抬头</span><span></span></div>
               <div><span>发票内容</span><span></span></div>
            </div>
            <div className="orderdetails_title">物流信息</div>
            <div className="orderdetails_matter">
               <div><span>联系人</span><span></span></div>
               <div><span>联系方式</span><span></span></div>
            </div>
            <div className="orderdetails_title">卖家信息</div>
            <div className="orderdetails_matter">
               <div><span>店铺名称</span><span>{dataArr.store_name}</span></div>
               <div><span>真实姓名</span><span>{dataArr.boss_name}</span></div>
               <div><span>联系电话</span><span>{dataArr.boss_phone}</span></div>
            </div>
            <table className="orderdetails_table">
               <thead>
                  <tr>
                     <th>水果店点名</th>
                     <th>规格</th>
                     <th>单价</th>
                     <th>数量</th>
                     <th>金额</th>
                  </tr>
               </thead>
               <tbody>
                  {dataArr.product.map((data) => {
                     return (
                        <tr key={data.product_id}>
                           <td>
                              <div className="orderdetails_onetd">
                                 <div className="orderdetails_img">
                                    <img src={data.product_img} alt=""></img>
                                 </div>
                                 <div>{data.product_name}</div>
                              </div>
                           </td>
                           <td><span>{data.product_number}</span><span>{data.product_specification}</span></td>
                           <td>￥<span>{data.product_price}</span></td>
                           <td>{data.buy_number}</td>
                           <td>{data.product_price}*{data.buy_number}</td>
                        </tr>
                     )
                  })}

               </tbody>
            </table>
         </div>
      </div>
   )
}
